<template>
  <div>
    <!--    开头以及搜索框-->
    <el-row>
      <el-col :span="24">
        <!--        分割线-->
        <el-divider><h2>疫情同程查询系统<br>V1.0</h2></el-divider>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        时间：
      </el-col>
      <el-col :span="21">
        <div class="demo-input-suffix">
          <el-date-picker
              v-model="timeValue"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        车次：
      </el-col>
      <el-col :span="21">
        <div class="demo-input-suffix">
          <el-input v-model="input_no" prefix="车次：" type="text" placeholder="车次或航班，例如：T123或AC1111"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        地区：
      </el-col>
      <el-col :span="21">
        <div class="demo-input-suffix">
          <el-input v-model="input_area" prefix="地区：" type="text" placeholder="可不填，例如：成都或四川"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-button type="primary" @click="inquire">查询</el-button>
          <el-button type="primary">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <!--    表格    -->
    <el-table
        ref="filterTable"
        :data="tableData.slice((currentPage -1)*pagesize,currentPage*pagesize)"
        style="width: 100%">
      <el-table-column
          type="expand"
      >
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="出行类型"
            >
              <span>{{ props.row.t_type }}</span>
            </el-form-item>
            <el-form-item label="日期">
              <span>{{ props.row.t_date }}</span>
            </el-form-item>
            <el-form-item label="航班号">
              <span>{{ props.row.t_no }}</span>
            </el-form-item>
            <el-form-item label="车厢">
              <span>{{ props.row.t_no_sub }}</span>
            </el-form-item>
            <el-form-item label="出发站">
              <span>{{ props.row.t_pos_start }}</span>
            </el-form-item>
            <el-form-item label="到达站">
              <span>{{ props.row.t_pos_end }}</span>
            </el-form-item>
            <el-form-item label="开始时间">
              <span>{{ props.row.t_start | dateTime }}</span>
            </el-form-item>
            <el-form-item label="结束时间">
              <span>{{ props.row.t_end | dateTime }}</span>
            </el-form-item>
            <el-form-item label="线索人">
              <span>{{ props.row.who }}</span>
            </el-form-item>
            <el-form-item label="提交时间">
              <span>{{ props.row.updated_at | dateTime }}</span>
            </el-form-item>
            <el-form-item label="事件备注">
              <span>{{ props.row.t_memo }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="出行类型"
          prop="t_type"
          column-key="t_type"
          :filters="[{text: '飞机', value: '飞机'}, {text: '火车', value: '火车'}, {text: '地铁', value: '地铁'}, {text: '长途客车/大巴', value: '长途客车/大巴'},{text: '公交车', value: '公交车'},{text: '出租车', value: '出租车'},{text: '轮船', value: '轮船'},{text: '其他公共场所', value: '其他公共场所'}]"
          :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
          label="日期"
          prop="t_date"
          sortable
      >
      </el-table-column>

      <el-table-column
          label="出发站"
          prop="t_pos_start">
      </el-table-column>
      <el-table-column
          label="到达站"
          prop="t_pos_end">
      </el-table-column>
      <el-table-column
          label="出行描述"
          prop="t_memo">
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
import axios from '@/plugins/axios'

export default {
  name: "MainPageTest1",
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      timeValue: '',
      input_no: '',
      input_area: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      tableData: [],
      tableDataCopy: []
    };
  },
  // filters:{
  //   dateTime:function (inputTime){
  //     return inputTime.slice(0,4) + '-' + inputTime.slice(5,7) + '-' + inputTime.slice(9,11);
  //   }
  // },
  mounted: function () {
    this.getData();
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    inquire() {
        let newarr = [];//空数组
        let input_data = {
            t_date:this.timeValue,
            t_no:this.input_no,
            t_area:this.input_area
        };
        for (let i = 0; i < this.tableDataCopy.length; i++) {
          let p = this.tableDataCopy[i];
          if (input_data.t_date === '' || this.GMTToStr(input_data.t_date)=== p.t_date){
            if (input_data.t_no === '' || input_data.t_no === p.t_no){
              if (input_data.t_area === '' || input_data.t_area === p.t_pos_end || input_data.t_area === p.t_pos_start){
                newarr.push(p);
              }
            }
          }
        }
        this.tableData = newarr;
    },
    //GMT时间转换
    GMTToStr(time) {
      let date = new Date(time);
      let year = '' + date.getFullYear();
      let month = '' + (date.getMonth() + 1);
      let day = '' + date.getDate();
      if (month.length < 2) {
        month = "0" + month;
      }
      if (day.length < 2) {
        day = "0" + day;
      }
      return [year, month, day].join('-');
    },
    getData() {
      let that = this;
      axios({
        url: ('/api/data.json'),
        method: 'get'
      }).then(
          res => {
            res.data.data.forEach(ele => {
              if (ele.t_type == '1') {
                ele.t_type = "飞机"
              } else if (ele.t_type == '2') {
                ele.t_type = "火车"
              } else if (ele.t_type == '3') {
                ele.t_type = "地铁"
              } else if (ele.t_type == '4') {
                ele.t_type = "长途客车/大巴"
              } else if (ele.t_type == '5') {
                ele.t_type = "公交车"
              } else if (ele.t_type == '6') {
                ele.t_type = '出租车'
              } else if (ele.t_type == '7') {
                ele.t_type = '轮船'
              } else if (ele.t_type == '8') {
                ele.t_type = '其它公共场所'
              }
            });
            that.tableData = res.data.data;
            that.tableDataCopy = res.data.data;
          }
      ).catch(err => {
            console.log('出现错误，未获取到数据', err);
          });
    }
  }


}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
  margin-bottom: 0;
}
}

.el-col {
  border-radius: 4px;
}

/deep/ .el-col-3 {
  /*当一行文字超过div或者table的宽度时，浏览器会默认换行，所以使用word-break:keep-all保持不换行*/
  word-break: keep-all;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .el-row {
  display: flex;
  align-items: center;
}

/deep/ .el-date-editor.el-input {
  width: 100%;
}

/*展开行表格*/
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>